<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
<style type="text/css">
	/*ul {
	width:150px;
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F93;
	border-right-color: #F93;
	border-bottom-color: #F93;
	border-left-color: #F93;
	
	list-style-type:none;
	line-height:30px;
	text-indent:3em;
	font-weight:bold;
}
 
li{
	border-bottom-color:#999999;
	border-bottom-style:dashed;
	border-bottom-width: 1px;
}
.one {
	
	background:url(img/datu.jpg)
	 no-repeat;
}
.two {
	
	background: url(img/log10.jpg)
	no-repeat;
}
.three {
	
	background: url(file:///C|/Users/Administrator/Desktop/icon_03.jpg)
	 no-repeat;
}
.four {
	
	background: url(file:///C|/Users/Administrator/Desktop/icon_04.jpg)
	 no-repeat;
}
.five {
	;
	background: url(file:///C|/Users/Administrator/Desktop/icon_05.jpg)
	 no-repeat;
}
.six {
	
	background: url(file:///C|/Users/Administrator/Desktop/icon_06.jpg)
	no-repeat;
}
.seven {
	
	background: url(file:///C|/Users/Administrator/Desktop/icon_07.jpg)
	 no-repeat;
}
.eight {
	
	background: url(file:///C|/Users/Administrator/Desktop/icon_08.jpg)
	 no-repeat;
}
.nine {
	
	background: url(file:///C|/Users/Administrator/Desktop/icon_09.jpg)
	 no-repeat;
}	
.ten {
	
	background:  url(file:///C|/Users/Administrator/Desktop/icon_10.jpg)
	 no-repeat;
	
}
 
 
a{
	color:#000;
	text-decoration:none;
}	
	
a:hover{
	color:#F00;*/
	
	
	
	*{
		margin:0;
		padding:0;
		}
	
	.clear{
		clear:both;
	}
 
	#top_left{
		width:300px;
		float: left;
	}
	#top_right{
		width:400px;
		float: right;
		margin-top:15px;
		font-size: 13px;
	}
	#top_right img{
		margin-bottom: -5px;
	}
	#top_right a{
		text-decoration: none;
		color:#06F;
	}
	#top_right a:hover{
		color:#909;
	}
	#menu{
		background-color: #1C3F09;
		border-top:5px solid #82B211;
		padding: 10px 0px;
		text-align: center;
	}
	#menu a{
		margin: 0 8px;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-size: 15px;
	}
	#menu a:hover{
		color: #999;
	}
	#menu .all{
		color: yellow
	}
	#search{
		background-color: #B6B684;
		padding:7px 0;
		text-align: right;
		
	}
	#search input[type='image']{
		/* margin-top: 5px; */
		margin-right: 250px;
		margin-bottom: -4px;
	}
	#search input[type='text']{
		height: 16px;
		border:1px solid #999;
	}
	
	/*-中间*/
	
	#content{
		width:900px;
		margin:8px auto 15px;/*auto div居中*/
	}
	
	#content_top{
		text-align: right;
		font-size:13px;
	}
	#content_bottom{
		border:1px solid #999;
		background-color: #FCFDEF;
		padding:10px 15px;
	}
	#content_bottom h1{
		font-size: 15px;
		display: inline;
	}
	#content_bottom span{
		font-size: 13px;
	}
	#productlist_img img{
		width: 100%;
	}
	.book{
		float: left;
		width: 25%;
		text-align: center;
		padding:10px 0px;
	}
	.bookimg img{
		width: 140px;
		height: 180px;
	}
	#jumpPage{
		text-align: center;
		margin: 10px;
	}
	#jumpPage a{
		padding:2px 6px;
		border: 1px solid #9AAFE5;
		text-decoration: none;
		color:#9AAFE5;
	}
	#jumpPage a:hover{
		color:#2B66A5;
		border: 1px solid #2B66A5;
	}
	.current{
		background-color: blue;
	}
    
    /*底部*/
    
 #bottom{
        background-color: #E2E2E2;
        height:60px;
        padding:10px 0px;
    }
	
	#bottom_left{
		width: 400px;
		float: left;
		margin-left: 200px;
	}
	#bottom_right{
		width: 500px;
		float: left;
		line-height:28px;/*行高*/
	}


</style>

	</head>
	<body>
<!--<ul>
<li class="one"><a href="#">酒水、饮料</a></li>
<li class="two"><a href="#">进口食品</a></li>
<li class="three"><a href="#">休闲零食</a></li>
<li class="four"><a href="#">地方特产</a></li>
<li class="five"><a href="#">保健、冲调</a></li>
<li class="six"><a href="#">粮油、生鲜品</a></li>
<li class="seven"><a href="#">美容洗护</a></li>
<li class="eight"><a href="#">清洁洗涤</a></li>
<li class="nine"><a href="#">母婴、纸品</a></li>
<li class="ten"><a href="#">家居百货</a></li>
</ul>-->
		
		
		
		
		
		
		
		<div id="page">
		<div id="top">
			<div id="top_left">
				<img alt="" src="../img/tus.png">
			</div>
			<div id="top_right">
				<img alt="" src="../img/gwce.png">
				<a href="#">购物车</a>|
				<a href="#">帮助中心</a>|
				<a href="#">我的账户</a>|
				<a href="#">新用户注册</a>
			</div>
		</div>
		<div class="clear"></div>
		<div id="menu">
			<a href="#">文学</a>
			<a href="#">生活</a>
			<a href="#">计算机</a>
			<a href="#">外语</a>
			<a href="#">经管</a>
			<a href="#">励志</a>
			<a href="#">社科</a>
			<a href="#">学术</a>
			<a href="#">少儿</a>
			<a href="#">艺术</a>
			<a href="#">原版</a>
			<a href="#">科技</a>
			<a href="#">考试</a>
			<a href="#">生活百科</a>
			<a class="all" href="#">全部目录商品</a>
		</div>
		<div id="search">
			<span>Search</span>
			<input type="text" />
			<input type="image" src="../img/shou.png" />
		</div>
		<div id="content">
			<div id="content_top">
				<span>首页 > 旅游 > 图书列表 </span>
			</div>
			<div id="content_bottom">
				<h1>商品目录</h1>
				<hr/>
				<h1>散文类</h1>
				<span>共100种商品</span>
				<hr/>
				<!--<div id="productlist">
					<div id="productlist_img">
						<img alt="" src="images/productlist.gif" width="100%">
					</div>-->
					<div id="booklist">
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t1.jpg">
							</div>
							<div class="bookIntr">
								<span>书名：安徒生童话</span><br/>
								<span>售价：18.9</span>
							</div>
						</div>
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t2.jpg">
							</div>
							<div class="bookIntr">
								<span>书名：三国演义</span><br/>
								<span>售价：26.9</span>
							</div>
						</div>
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t3.jpg">
							</div>
							<div class="bookIntr">
								<span>书名：华梵汇流</span><br/>
								<span>售价：29.9</span>
							</div>
						</div>
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t4.jpg">
							</div>
							<div class="bookIntr">
								<span>书名：悲惨世界</span><br/>
								<span>售价：45.9</span>
							</div>
						</div>
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t5.jpg" width="102">
							</div>
							<div class="bookIntr">
								<span>书名：心理学</span><br/>
								<span>售价：19.9</span>
							</div>
						</div>
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t6.jpg" width="102">
							</div>
							<div class="bookIntr">
								<span>书名：静</span><br/>
								<span>售价：29.9</span>
							</div>
						</div>
						<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t7.jpg">
							</div>
							<div class="bookIntr">
								<span>书名：繁星·春水</span><br/>
								<span>售价：39.9</span>
							</div>
						</div>
						<!--<div class="book">
							<div>
								<img alt="" src="../img/t9.jpg" width="130">
							</div>
							<div>
								<span>书名:xxx</span>
								<br>
								<span>售价:xxx</span>
							</div>-->
							
							<div class="book">
							<div class="bookimg">
								<img alt="" src="../img/t8.jpg">
							</div>
							<div class="bookIntr">
								<span>书名：时光知味</span><br/>
								<span>售价：35.9</span>
							</div>
						</div>
						<div class="clear"></div>
						<div id="jumpPage">
							<a href="#">上一页</a>
							<a class="current" href="#">1</a>
							<a href="#">2</a>
							<a href="#">3</a>
							<a href="#">4</a>
							<a href="#">5</a>
							<a href="#">6</a>
							<a href="#">7</a>
							<a href="#">下一页</a>
						</div>
					</div>
				</div>
				
		</div>
			</div>
			<div id="bottom">
			<div id="bottom_left">
				<img alt="" src="images/logo.png">
			</div>
			<div id="bottom_right">
				<span>CONTACT US</span><br/>
				<span>copyright 2017 &copy; striner All Rights RESERVED</span>
			</div>
		</div>
	</div>


	</body>
</html>
